<template>
  <div id="div1">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="所属公寓" prop="apartment">
            <el-select
              v-model="form.apartment"
              placeholder="请选择公寓"
              class="input-class"
              size="small"
            >
              <el-option
                v-for="apartment in apartments"
                :key="apartment.value"
                :label="apartment.label"
                :value="apartment.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼" prop="building">
            <el-input
              v-model="form.building"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="层" prop="floor">
            <el-input
              v-model="form.floor"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类型" prop="type">
            <el-input
              v-model="form.type"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="面积" prop="area">
            <el-input
              v-model="form.area"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租金" prop="rent">
            <el-input
              v-model="form.rent"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="租金方案" prop="rentPlan">
            <el-input
              v-model="form.rentPlan"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公寓地址" prop="apartmentAddress">
            <el-input
              v-model="form.apartmentAddress"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="公寓电话" prop="apartmentPhone">
            <el-input
              v-model="form.apartmentPhone"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房屋管理员" prop="houseManager">
            <el-input
              v-model="form.houseManager"
              class="input-class"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="8">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="form.contactPhone"
              class="input-class"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="400">
        <el-col :span="23">
          <el-form-item label="介绍" prop="description">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传图片">
            <!-- 
                                                            el-upload 上传组件
                                                            1.auto-upload属性：是否自动上传，默认true开启自动上传
                                                            2.action属性：指定上传地址，controller的接口地址
                                                            3.name属性：上传文件名，controller接口中方法形参名称一致
                                                            4.show-file-list属性：是否显示文件列表
                                                            5.on-success属性：上传成功回调
                                                            6.before-upload属性：上传前回调
                                                            7.class属性：avatar-uploader即为头像样式
                                                        -->
            <el-upload
              style="position: relative;"
              class="avatar-uploader"
              action="/api/admin/upload"
              :headers="headerObj"
              :auto-upload="autoUpload"
              name="file"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
              <el-icon
                v-else
                class="avatar-uploader-icon"
                style="position: relative; margin:50px 45px"
              >
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <div class="button-container">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="info" @click="closeForm">关闭</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

import { ElMessage, ElSelect, ElOption } from 'element-plus'

export default {
  components: {
    ElSelect,
    ElOption,
  },
  setup() {
    const formRef = ref(null)
    const form = reactive({
      apartment: '', // 下拉框选择的公寓
      building: '',
      floor: '',
      type: '',
      area: '',
      rent: '',
      rentPlan: '',
      apartmentAddress: '',
      apartmentPhone: '',
      houseManager: '',
      contactPhone: '',
      description: '',
      photo: null, // 照片文件
      autoUpload: true, //自动上传
      imageUrl: null, //模型数据，用于上传图片完成后图片预览
    })

    const apartments = reactive([
      { value: 'Apartment A', label: '公寓A' },
      { value: 'Apartment B', label: '公寓B' },
      { value: 'Apartment c', label: '公寓c' },
      // 更多公寓选项...
    ])

    const rules = reactive({
      apartment: [
        { required: true, message: '请选择所属公寓', trigger: 'change' },
      ],
      building: [{ required: true, message: '请输入楼号', trigger: 'blur' }],
      floor: [{ required: true, message: '层不能为空', trigger: 'blur' }],
      type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
      area: [
        { required: true, message: '面积不能为空', trigger: 'blur' },
        { type: 'number', message: '面积必须为数字' },
      ],
      rent: [
        { required: true, message: '租金不能为空', trigger: 'blur' },
        { type: 'number', message: '租金必须为数字' },
      ],
      rentPlan: [
        { required: true, message: '租金方案不能为空', trigger: 'blur' },
      ],
      apartmentAddress: [
        { required: true, message: '公寓地址不能为空', trigger: 'blur' },
      ],
      apartmentPhone: [
        { required: true, message: '公寓电话不能为空', trigger: 'blur' },
      ],
      houseManager: [
        { required: true, message: '房屋管理员不能为空', trigger: 'blur' },
      ],
      contactPhone: [
        { required: true, message: '联系电话不能为空', trigger: 'blur' },
      ],
      description: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
      //photo: [
      // { required: true, message: '请上传照片', trigger: 'change' },
      //],
    })

    const submitForm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          // 表单验证通过，执行提交操作
          console.log('Form submit!', form)
          ElMessage.success('表单提交成功！')
        } else {
          // 表单验证失败
          ElMessage.error('表单验证失败，请检查输入！')
          return false
        }
      })
    }

    const handleAvatarSuccess = (response, file) => {
      console.log(response)

      if (response.code === 200) {
        form.imageUrl = response.data // 假设响应体包含url字段
        ElMessage({
          type: 'success',
          message: '图片上传成功',
        })
      } else {
        ElMessage({
          type: 'error',
          message: '图片上传成功',
        })
      }
    }

    const beforeAvatarUpload = file => {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        ElMessage.error('上传的图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        ElMessage.error('上传的图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

    const resetForm = () => {
      formRef.value.resetFields()
    }

    const closeForm = () => {
      // 执行关闭表单的逻辑
      ElMessage.info('表单已关闭')
    }

    const handleFileChange = (file, fileList) => {
      form.photo = file // 更新照片文件
    }

    const beforeUpload = file => {
      // 可以在这里添加文件上传前的验证逻辑
      const isImage = file.type.startsWith('image/')
      if (!isImage) {
        ElMessage.error('只能上传图片文件！')
      }
      return isImage
    }

    return {
      form,
      rules,
      submitForm,
      resetForm,
      closeForm,
      handleFileChange,
      beforeUpload,
      formRef,
      apartments,
      handleAvatarSuccess,
      beforeAvatarUpload,
    }
  },
}
</script>

<style scoped>
.input-class {
  width: 300px; /* 你想要的宽度 */
  height: 20px; /* 你想要的高度 */
  padding: 5px; /*padding: 5px; 内边距 */
}
#div1 {
  margin-left: 200px;
  background-color: white;
  width: 900px;
  height: 900px;
}
.button-container {
  display: flex;
  justify-content: center;
  padding: 20px; /* 添加一些内边距 */
  padding-right: 13%;
}
</style>
